<template>
  <div>
    <ul class="box">
      <li @click="fn()">&lt;</li>
      <li>
        <router-link :to="{path:'/headlines',query:{textlist:tot}}">头条</router-link>
      </li>
      <li>
        <router-link :to="{path:'/headline2',query:{textlist:lic}}">理财</router-link>
      </li>
      <li>
        <router-link :to="{path:'/headline3',query:{textlist:zhut}}">专题</router-link>
      </li>
      <li>
        <router-link :to="{path:'/headline4',query:{textlist:youh}}">优惠</router-link>
      </li>
      <li>
        <router-link to="/headline5">公告</router-link>
      </li>
    </ul>
    <hr />
    <div class="bl"></div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      this.$router.push("/home");
    },
  },
  created() {
    this.$store.dispatch("tranlink", "/mock/data/bankdata");
  },
  computed: {
    tot() {
      return this.$store.state.headl.textlist.slice(0, 6);
    },
    lic() {
      return this.$store.state.headl.textlist.slice(6,10);
    },
    zhut() {
      return this.$store.state.headl.textlist.slice(10, 14);
    },
    youh() {
      return this.$store.state.headl.textlist.slice(14, 16);
    },
  },
};
</script>

<style scoped>
.bl {
  width: 100%;
  height: 0.3rem;
}
.box {
  width: 100%;
  height: 0.3rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  position: fixed;
  background-color: white;
}
li {
  font-size: 0.14rem;
}
a.router-link-exact-active {
  color: #fc5853;
}
</style>